<template>
<div class="search-input">
  <input type="text" placeholder="输入你要找的内容" 
      :class="{shadow: isShowShadow}" 
      @focus="showShadow" 
      @blur="showShadow">
  <img src="~assets/img/common/search.svg" alt="点击搜索">
</div>
</template>

<script>
export default{
  name: 'SearchInput',
  data () {
    return {
      isShowShadow: false
    }
  },
  methods: {
    showShadow() {
      this.isShowShadow = !this.isShowShadow
    }
  }
}
</script>

<style scoped>
.search-input{
  line-height: 50px;
}
.search-input input{
  padding: 10px 45px 10px 15px;
  width: 215px;
  height: 30px;
  line-height: 30px;
  font-size: 12px;
  border: 1px solid #868585;
  outline: none;
  border-radius: 20px;
  color: #868585;
}
.search-input img{
  width: 24px;
  height: 24px;
  cursor: pointer;
  position: relative;
  left: -40px;
  top: 6px;
}
.shadow{
  box-shadow: 0 0 3px 2px #ff0000;
}

</style>
